
<template>
  <div id="chooseAddress" :class='{"isiphone":$isiphone}'>
    <ul>
      <li v-for="(item, index) in addressList" :key='index'>
        <img v-if="item.isActive" src="../../../wechat/static/images/radio.svg" alt="" class="radio">
        <img v-else src="../../../wechat/static/images/radio02.svg" alt="" class="radio">
        <div class="one" @click="chooseThis(item)">
          <span class='name'>{{item.name}}</span> <span class='phone'>{{item.phone}}</span>
          <span class='address'>{{item.title}}</span>
        </div>
        <div class="two">
          <x-switch title='设为默认' v-model="item.isDefault"
          @on-change='switchChange(item,index)'></x-switch>
          <img src="../../../wechat/static/images/qrdd_sc.png" @click='delectI(item,index)' alt="">
          <img src="../../../wechat/static/images/qrdd_bj.png" @click='JumpBj(item)' alt="">
        </div>
      </li>
      <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
    </ul>
    <div class="four">
      <a href="javascript:;" @click="add">新增收货地址</a>
    </div>
  </div>
</template>

<script>
import { XSwitch,LoadMore } from 'vux'
export default {
  name: "chooseAddress",
  data() {
    return {
      addressList: [],
      isloading: false,
      isDefault: "", //是否为默认地址
      pageIndex: 1, //第几页
      pageSize: 1000, //每页大小
      userId: localStorage.getItem('userId')||'' ,//所属用户id
    };
  },
  mounted() {
    this.addressList = []
    this.getList()
  },
  created() {
    
  },
  methods: {
    chooseThis(v){
      v.isActive = true
      setTimeout(() => {
        localStorage.setItem('orderConName',v.name)
        localStorage.setItem('orderConPhone',v.phone)
        localStorage.setItem('orderConAddress',v.title)
        localStorage.setItem('provinceCode',v.province)
        localStorage.setItem('cityCode',v.city)
        localStorage.setItem('districtCode',v.district)
        
        this.$router.replace({
          path: '/confirmOrder?id='+this.$route.query.id+'&type=choose'
        })
      }, 300);
    },
    add () {
      this.$router.push('./addressEdit')
    },
    delectI(v, i) {
      var that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '是否删除',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
          let url =
            that.$CONSTANT.ADDRESS.deleteEsUserAddress +
            "?sessionId=" +
            that.$common.getCookie("sessionId");
          let param = {
            id: v.id
          };
          that.$vux.loading.show({
            text: 'Loading'
          })
          setTimeout(() => {
            that.$common.post(url, param, res => {
              that.$vux.loading.hide()
              if (res.status == 200) {
                var bussData = res.data.bussData;
                setTimeout(() => {
                  that.addressList.splice(i,1)
                  if(that.addressList.length ==0 ){
                    localStorage.setItem('orderConName','')
                    localStorage.setItem('orderConPhone','')
                    localStorage.setItem('orderConAddress','')
                  }
                }, 1000);
                that.$vux.toast.show({
                  text: res.msg,
                  type: ""
                });
              } else {
                this.$vux.toast.show({
                  text: res.msg,
                  type: "warn",
              width: 'auto'
                });
              }
            });
          }, 1000);
        }
      })
    },
    getList() {
      let url =
        this.$CONSTANT.ADDRESS.findEsUserAddressByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        isDefault: this.isDefault,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        userId: this.userId,
      };
      this.addressList = []
      // this.$vux.loading.show({
      //   text: 'Loading'
      // })
      this.isloading = false
      this.$common.post(url, param, res => {
        this.isloading = true
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          if(bussData.length ==0 ){
            localStorage.setItem('orderConName','')
            localStorage.setItem('orderConPhone','')
            localStorage.setItem('orderConAddress','')
          }
          bussData.forEach(element => {
            this.addressList.push({
              id:element.id,
              name: element.recieveName,
              phone: element.mobile,
              title: element.address,
              isDefault: element.isDefault=='y'?true:false,
              isActive: false,
              province:element.province,
              district:element.district,
              city:element.city
            })
          });
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    deepClone(obj){
        let newObj=Array.isArray(obj)?[]:{}

        if(obj&&typeof obj ==="object"){
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    newObj[key]=(obj && typeof obj[key]==='object')?this.deepClone(obj[key]):obj[key];
                }
            }
        }
        return newObj
    },
    switchChange(item,index) {
      console.log(item,index)
      this.setDefault(item)
    },
    setDefault(item){
      let url =
        this.$CONSTANT.ADDRESS.saveEsUserAddress +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        address: item.title,
        id: item.id,
        isDefault: item.isDefault?'y':'n',
        mobile: item.phone,
        recieveName: item.name,
        userId: localStorage.getItem("userId")||''
      };
      //this.$vux.loading.show({
      //   text: 'Loading'
      // })
      this.$common.post(url, param, res => {
        this.$vux.loading.hide()
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.$vux.toast.show({
            text: res.msg,
            type: "",
              width: 'auto'
          });
          setTimeout(() => {
            this.getList()
          }, 1100);
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    JumpBj(item) {
      this.$router.push({
        path: '/addressEdit?id='+item.id
      })
    }
  },
  components: {
    XSwitch,
    LoadMore
  }
};
</script>

<style lang="less">
#chooseAddress{
  ul{
    .noData{
      text-align: center;
      color: #999;
      font-family: PingFang-SC-Medium;
    }
    li{
      background: #fff;
      position: relative;
      margin-bottom: 8px;
      img.radio{
        width: 16px;
        height: 16px;
        vertical-align: middle;
        float: left;
        position: absolute;
        top: 34px;
        left: 11px;
      }
      .one{
        padding: 20px 39px;
        border-bottom: 1px solid #E1E1E1;
        span.name{
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
        }
        .address{
          display: block;
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #333;
          margin-top: 0px;
        }
        .phone{
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
          margin-left: 11px;
        }
      }
      .two{
        height: 42px;
        line-height: 42px;
        padding-right: 10px;
        .vux-x-switch{
          display: inline-block;
          padding-top: 0;
          .weui-cell__bd{
            display: inline-block;
            font-family: PingFang-SC-Medium;font-size: 10px;
            color: #999;
            margin-left:11px; 
            .weui-label{
              width: 4.2em;
            }
          }
          .weui-cell__ft{
            display: inline-block;
            position: relative;
            top: 5px;
            .weui-switch{
              width: 27px;
              height: 17px;
              padding-top: 0px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              &:before{
                width: 27px;
                height: 17px;
              }
              &:after{
                width: 16px;
                height: 15px;

              }
              &:checked:after {
                -webkit-transform: translateX(10px); 
                transform: translateX(10px); 
              }
            }
          }
        }
        img{
          width: 15px;
          height: 15px;
          float: right;
          margin-left: 14px;
          margin-top: 13px;
        }
      }
    }
  }
  .four {
      position: fixed;
      width: 100%;
      bottom: 10px;
      text-align: center;
      a {
        display: inline-block;
        height: 45px;
        width: 229px;
        text-align: center;
        line-height: 45px;
        background: #ee3c4a;
        color: #fff;
        font-size: 15px;
        font-family: PingFang-SC-Bold;font-weight: 600;
        border: 1px solid transparent;
        border-radius: 23px;
      }
    }
}

</style>
